认识 Backbone（三） : 什么是 Router

Backbone 中的 Router 充当路由的作用，控制 URL 的走向，当在 URL 中使用 # 标签时生效。
定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL，而且我们需要记住，在 Backbone 中，# 标签后的任意字符都会被 Router 接收并解释。
下面我们来定义一个 Router：

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "*actions": "defaultRoute" // 匹配 http://example.com/#anything-here
        }
    });
    // 实例化 Router
    var app_router = new AppRouter;

    app_router.on('route:defaultRoute', function(actions) {
        alert(actions);
    })

    // 打开 Backbone 的历史记录
    Backbone.history.start();
</script>

现在，我们就定义好了一个 Router 了，但此时 Router 并未匹配特定的 URL，接下来我们开始详细讲解 Router 是如何工作的。

动态路由选择

Backbone 允许你定义带有特定参数的 Router。例如，你可能希望通过一个特定的 id 接收一个 post，比如这样一个 URL："http://example.com/#/posts/12"，一旦这个 Router 被激活，你就可以取得一个 id 为12的 post。接下来，我们就来定义这个 Router：

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "posts/:id": "getPost",
            "*actions": "defaultRoute" //Backbone 会根据顺序匹配路由
        }
    });
    // 实例化 Router
    var app_router = new AppRouter;
    app_router.on('route:getPost', function (id) {
        // 注意，参数通过这里进行传递
        alert( "Get post number " + id );   
    });
    app_router.on('route:defaultRoute', function (actions) {
        alert( actions ); 
    });
   // 打开 Backbone 的历史记录
    Backbone.history.start();
</script>

匹配规则

Backbone 使用两种形式的变量来设置 Router 的匹配规则。第一种是 :，它可以匹配 URL 中斜杠之间的任意参数，另一种是 *，它用来匹配斜杠后面的所有部分。注意，由于第二种形式的模糊性大于第一种，所以它的匹配优先级最低。
任一形式匹配的结果会以参数的形式传递到相关的函数中，第一种规则可能返回一个或多个参数，第二种规则将整个匹配结果作为一个参数返回。
接下来，我们用实例来说明：

routes:{

    "posts/:id": "getPost",
    // <a href="http://example.com/#/posts/121">Example</a>

    "download/*path": "downloadFile",
    // <a href="http://example.com/#/download/user/images/hey.gif">Download</a>

    ":route/:action": "loadView",
    // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>

},

app_router.on('route:getPost', function( id ){ 
    alert(id); // 匹配后，传递过来的参数为 12
});
app_router.on('route:downloadFile', function( path ){ 
    alert(path); // 匹配后，整个匹配结果作为一个参数返回，路径为 user/images/hey.gif 
});
app_router.on('route:loadView', function( route, action ){ 
    alert(route + "_" + action); // 匹配后，传递过来两个参数，此时会弹出 dashboard_graph 
});

参考

http://backbonetutorials.com/what-is-a-router/#/posts/120